<link href="../../plugins/coreui/coreui.css" rel="stylesheet" />
<link href="../../plugins/coreui/upload.css" rel="stylesheet" />
<link href="../../css/admin.css" rel="stylesheet" />
<style>
	img{
		width:100px;
		height:100px;
	}
</style>
<div class="box">
	<div>
		<form>
			<input type="hidden" id="id" name="id" value="${model.id}" />
			<div class="col-m-12">
				<label for="account" class="col-m-3 text-right">登录账号：</label>
				<div class="col-m-9">
					<input type="text" id="account" name="account" class="form-input" value="${model.account}" />
				</div>
			</div>
			<% if(model.id==0){ %>
				<div class="col-m-12">
					<label for="password" class="col-m-3 text-right">登录密码：</label>
					<div class="col-m-9">
						<input type="password" id="password" name="password" class="form-input" value="${model.account}" />
					</div>
				</div>
			<% } %>
			<div class="col-m-12">
				<label for="name" class="col-m-3 text-right">姓名：</label>
				<div class="col-m-9">
					<input type="text" id="name" name="name" class="form-input" value="${model.name}" />
				</div>
			</div>
			<div class="col-m-12">
				<label for="nickname" class="col-m-3 text-right">昵称：</label>
				<div class="col-m-9">
					<input type="text" id="nickname" name="nickname" class="form-input" value="${model.nickname}" />
				</div>
			</div>
			<div class="col-m-12">
				<label for="nickname" class="col-m-3 text-right">头像：</label>
				<div class="col-m-9">
					<input type="hidden" id="img" name="img" value="${model.img}" />
					<img id="preImg" alt="头像" src="../../${model.img}">
					<div class="coreui-upload">
			            <div>选择文件</div>
			            <input type="file" id="f_img" />
			        </div>
			        <button type="button" id="btnUpload" class="btn btn-bg-green">上传</button>
				</div>
			</div>
			<div class="col-m-12">
				<label class="col-m-3 text-right">状态：</label>
				<div class="col-m-9">
					<select id="status" name="status" class="form-select">
						<option ${model.status==1?"selected='selected'":""} value="1">启用</option>
						<option ${model.status==0?"selected='selected'":""} value="0">隐藏</option>
					</select>
				</div>
			</div>
			<% if(roleList.~size>0){ %>
				<div class="col-m-12">
	                <label class="col-m-3 text-right">设置角色：</label>
	                <div class="col-m-9">
	                	<% for(role in roleList){ 
	                		if(model.id==0||!array.contain(model.roleIds,role.id)){
	                	%>
	                    	<div class="col-m-6"><input value="${role.id}" name="chk_role" id="chk_role" type="checkbox" />${role.name}</div>
	                    <% }else{ %>
	                    		<div class="col-m-6"><input checked="checked" value="${role.id}" name="chk_role" id="chk_role" type="checkbox" />${role.name}</div>
	                    <% }} %>
	                </div>
	            </div>
			<% } %>
            <% if(groupList.~size>0){ %>
            	<div class="col-m-12">
	                <label class="col-m-3 text-right">设置用户组：</label>
	                <div class="col-m-9">
	                	<% for(group in groupList){ 
	                		if(model.id==0||!array.contain(model.groupIds,group.id)){
	                	%>
	                    	<div class="col-m-6"><input value="${group.id}" name="chk_group" id="chk_group" type="checkbox" />${group.name}</div>
	                    <% }else{ %>
	                    		<div class="col-m-6"><input checked="checked" value="${group.id}" name="chk_group" id="chk_group" type="checkbox" />${group.name}</div>
	                    <% }} %>
	                </div>
	            </div>
            <% } %>
		</form>
	</div>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script src="../../plugins/coreui/upload.js" ></script>
<script>
	$("#f_img").change(function () {
		showPreview('f_img','preImg');
	});
	$("#btnUpload").click(function(){
		coreui.upload({
			id: 'f_img',
			url: '../../manager/upload/uploadImg',
			type: 'jpg|png|gif',
			size: 2,
			success: function(res) {
				//res是json格式
				//只要经过了服务器端就好执行此回调
			}
		});
	});
	
	
    function showPreview(fileContainer,target) {
    	var file=document.getElementById(fileContainer).files[0];
        //通过file.size可以取得图片大小
        var reader = new FileReader();
        reader.onload = function (evt) {
        	document.getElementById(target).src = evt.target.result;
        }
        reader.readAsDataURL(file);
    }

</script>